<template>
  <div class="hljs">
    <el-form :model="dataFrom"
             size="small"
             ref="dataFrom"
             :rules="dataFormRules"
             style="text-align: left"
             label-width="140px">
      <div class="system">非工作时间</div>
      <el-form-item label="开始统计时间" prop="collectTime">
        <el-date-picker
          v-model="dataFrom.collectTime"
          type="date"
          style="width: 100%"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-for="(domain, index) in range"
                    :label="'非工作时间配置' + (index + 1)"
                    :key="domain.id"
      >
        <el-time-select
          v-model="domain.startTime"
          :disabled="domain.id ? true : false"
          :picker-options="{
            start: '00:00',
            step: '00:60',
            end: '23:59'
          }"
          placeholder="请选择开始时间">
        </el-time-select>
        <el-time-select
          v-model="domain.endTime"
          :disabled="domain.id ? true : false"
          :picker-options="{
            start: '00:00',
            step: '00:60',
            end: '23:59',
            minTime: domain.startTime
          }"
          placeholder="请选择结束时间">
        </el-time-select>
        <el-button @click.prevent="removeDomain(domain)" type="danger">删除</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align: left">
      <el-button
        @click="submitForm"
        type="primary"
        size="small">
        保存
      </el-button>
      <el-button
        @click="addDomain"
        size="small">
        新增非工作时间配置
      </el-button>
    </div>
  </div>
</template>

<script>
  import {message} from "@/utils/message"
  export default {
    props: {
      dataFrom: {
        type: Object,
        default () {
          return {}
        }
      },
      range: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data() {
      return {
        dataFormRules: {
          collectTime: [{required: true, message: '请输入时间', trigger: ['blur', 'change'] }]
        }
      }
    },
    methods: {
      submitForm () {
        this.$refs['dataFrom'].validate(valid => {
          const parms = {
            collectTime: this.dataFrom.collectTime,
            range: this.range
          }
          if (valid) {
            this.$emit('submitFormWork', parms)
          }
        })
      },
      addDomain () {
        this.range.push({
          startTime: '',
          endTime: '',
          id: ''
        })
      },
      removeDomain(item) {
        if (this.range.length === 1) {
          message({
            type: 'error',
            message: '至少配置一项非工作时间配置'
          })
        } else {
          let index = this.range.indexOf(item)
          if (index !== -1) {
            this.range.splice(index, 1)
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
